//
//  XGTestViewController.m
//  OC和JS互调源码
//
//  Created by 小果 on 16/7/15.
//  Copyright © 2016年 小果. All rights reserved.
//

#import "XGTestViewController.h"

@interface XGTestViewController ()<UIWebViewDelegate>

@property (nonatomic, weak) UIWebView *WBView;

@end
/*
 OC和JS的交互需要使用UIWebView这个桥梁的代理方法实现
 */

@implementation XGTestViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = Color;
    self.title = @"这是一个网页哦";
    
    UIWebView *wv = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, ScreenW, ScreenH)];
    self.WBView = wv;
    wv.backgroundColor = Color;
    // 去掉WebView底部的黑边
    wv.opaque = NO;
    
    wv.delegate = self;
    [self.view addSubview:wv];
    
    NSURL *url = [NSURL URLWithString:@"http://m.dianping.com/tuan/deal/19855238?from=m_reculike"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.WBView loadRequest:request];
}

/**
 1.网页加载完成时调用的
 2.网页加载完成之后,使用OC调用JS的接口把不需要的网页标签删除
 3.OC调用JS的接口还可以给网页中的标签添加点击事件或者给网页添加标签
 */
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    // JS的代码
    NSMutableString *JSStM = [NSMutableString string];
    
    /**
     ①找到要删除的对应的标签：var headerTag = document.getElementsByTagName('header')[0];
     ②找到要删除的标签对应的父节点：headerTag.parentNode
     ③从父节点中将要删除的标签移除：headerTag.parentNode.removeChild(headerTag);
     */
    // 删除导航
    [JSStM appendString:@"var headerTag = document.getElementsByTagName('header')[0];headerTag.parentNode.removeChild(headerTag);"];
    
    // 删除中间的“立即购买”按钮
    [JSStM appendString:@"var buyTag = document.getElementsByClassName('buy-now')[0];buyTag.parentNode.removeChild(buyTag);"];
    
    // 删除底部"APP下单返积分抵现金”悬停按钮
    [JSStM appendString:@"var footerBtnTag = document.getElementsByClassName('footer-btn-fix')[0]; footerBtnTag.parentNode.removeChild(footerBtnTag);"];
    
    // 删除底部“各种信息”布局
    [JSStM appendString:@"var footerTag = document.getElementsByClassName('footer')[0]; footerTag.parentNode.removeChild(footerTag);"];
    
    // 给标签“顶部的图片”添加点击事件
    /**
     ①JS中给标签添加相应的事件：弹框
     var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){alert("点我点我点我")};
     ②通过点击某个标签跳转到其他链接：给图片添加点击事件
     var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){window.location.href = 'http://www.baidu.com'};
     
     跳转到百度中的OC调用JS代码
     [JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0];figureTag.onclick = function(){window.location.href = 'http://www.baidu.com'};"];
    */
    // 通过自定义协议头的方式来实现控制器间的跳转，即JS调用OC代码
//    [JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'xg://?src= '+this.src};"];
    // 也可写成一下代码
    [JSStM appendString:@"var figureTag = document.getElementsByTagName('figure')[0].children[0]; figureTag.onclick = function(){window.location.href = 'xg://www.hahah.com'};"];
    
    // OC调用JS代码
    [webView stringByEvaluatingJavaScriptFromString:JSStM];
    
}

/**
 1.JS与OC交互的桥梁
 2.可以拦截webView上所有的请求
 3.点击事件发送请求,自定义请求协议的目的是为了做标记.
 */
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSLog(@"%@",request.URL.absoluteString);
    
    // 拿到网页上的请求地址
    NSString *URLString = request.URL.absoluteString;
    // 判断网页的请求地址协议是否是我们自定义的那个
    NSRange range = [URLString rangeOfString:@"xg://?src="];
//    if (range.length > 0) {
    if ([URLString isEqualToString:@"xg://www.hahah.com"]){
                NSLog(@"你点击的是图片");
        
        // 控制器的跳转
        [self.navigationController popToRootViewControllerAnimated:YES];
        // 拦截到的这个自定义协议的请求时,我是不需要做网页加载的,就返回NO.
        return NO;
        /**
         温馨提醒:
         ①这里点击标签之后,如果不需要加载任何的网页,就需要return NO;
         ②如果需求是 : 点击网页的分享图标(按钮),跳转到分享页面,业务逻辑跟点击图片实现跳转是一样的,只需要在网页中找到那个分享的标签,确定他的点击事件并发送一个自定义协议头的请求,然后拦截这个特殊协议头的请求即可
         */
    }
    
    return YES;
}

@end
